<template>
    <div class="header_container">
        <a-row>
            <a-col :span="8">
                <a-space>
                    <a-tree-select style="width: 280px;" v-model="regin"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :tree-data="treeData"
                        :replaceFields="replaceFields" placeholder="请选择设备" tree-default-expand-all @select="onselect"
                        allowClear>
                    </a-tree-select></a-space></a-col>
            <a-col :span="10">
                <a-space>
                    <a-button v-for="(item, index) in btnList" :key="index" @click="create(item)">{{ item.name
                        }}</a-button>
                </a-space>
            </a-col>
            <a-col :span="6">
                <a-space>
                    <slot name="more"></slot>
                </a-space>
            </a-col>
        </a-row>

    </div>
</template>

<script>
import minx from './mixin'
export default {
    mixins: [minx],
    data() {
        return {
            regin: 10000,
            btnList: [
                {
                    name: '矩形',
                    type: 'rect'
                },
                {
                    name: '圆形',
                    type: 'ellipse'
                },
                {
                    name: '文本',
                    type: 'text'
                },
                {
                    name: '线条',
                    type: 'line'
                },
                {
                    name: '多边形',
                    type: 'polygon'
                },
                {
                    name: '箭头',
                    type: 'arrow'
                },
            ],
            treeData: []
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        async init() {
            const res = await this.getRegionList()
            this.treeData = res
            await this.onselect(null, { dataRef: this.treeData[0] })
        },
        create(val) {
            this.$emit('onChange', val)
        },
        async onselect(e, node) {
            const res = await this.getDrawListByOrgId(node.dataRef.id)
            const data = {
                data: res.data,
                node: node.dataRef,
            }
            this.$emit('onSelect', data)
        }
    }
}
</script>

<style lang='less' scoped></style>
